<template>
    <div>
        <a-table :dataSource="subjects" :columns="columns" size="small" :pagination="{ pageSize: 3 }">
            <template #bodyCell="{ column, text, record }">
                <template v-if="column.dataIndex === 'operation'">
                    <a-space>
                        <a-button danger @click="show(record)">编辑</a-button>
                        <a-popconfirm title="确认要删除吗?" @confirm="handleDelete(record)">
                            <a>删除</a>
                        </a-popconfirm>
                    </a-space>
                </template>
            </template>
        </a-table>
        <a-modal v-model:visible="visible" title="Basic Modal" @ok="handleClick">
            <a-form :model="subject" name="basic" :label-col="{ span: 4 }" :wrapper-col="{ span: 16 }" autocomplete="off"
                >
                <a-form-item label="课程名称" name="subjectName" :rules="[{ message: '请输入课程' }]">
                    <a-input v-model:value="subject.subjectName" />
                </a-form-item>
                <a-form-item label="所在年级" name="gradeID">
                    <a-select v-model:value="subject.gradeID" >
                        <a-select-option v-for="item in grades" :value="item.gradeID">
                            {{ item.gradeName }}
                        </a-select-option>
                    </a-select>
                </a-form-item>
                <a-form-item label="学时数" name="classHour" :rules="[{ message: '请输入学时数' }]">
                    <a-input v-model:value="subject.classHour" />
                </a-form-item>
            </a-form>
        </a-modal>
    </div>
</template>
<script>
import axios from 'axios';
export default {
    data() {
        return {
            subjects: [],
            grades: [],
            subject: {
                subjectNo: '',
                subjectName: '',
                gradeID: '',
                classHour: ''
            },
            columns: [
                {
                    title: '课程编号',
                    dataIndex: 'subjectNo',
                },
                {
                    title: '课程名称',
                    dataIndex: 'subjectName',
                },
                {
                    title: '所在年级',
                    dataIndex: 'gradeID',
                },
                {
                    title: '学时',
                    dataIndex: 'classHour',
                },
                {
                    title: '编辑',
                    dataIndex: 'operation',
                }
            ],
            visible: false,
        }
    },
    methods: {
        loadsubjects() {
            axios.get('/subject')
                .then(res => {
                    this.subjects = res.data.data;
                })
        },
        loadgrades() {
            axios.get('/grade/all',).then(res => {
                if (res.data.success) {
                    this.grades = res.data.data
                }
            })
        },
        handleClick() {
            this.visible = false
            let data = {
                subjectNo: this.subject.subjectNo,
                subjectName: this.subject.subjectName,
                gradeID: this.subject.gradeID,
                classHour: this.subject.classHour
            }
            axios.put('/subject/', data)
                .then(res => {
                    if (res.data.success) {
                        alert('修改课程成功')
                        this.subject = {
                            subjectNo: '',
                            subjectName: '',
                            gradeID: '',
                            classHour: ''
                        }
                        this.loadsubjects()
                    }
                })
        },
        show(item) {
            this.visible = true
            this.subject.subjectNo = item.subjectNo
            this.subject.subjectName = item.subjectName
            this.subject.gradeID = item.gradeID
            this.subject.classHour = item.classHour
        },
        handleDelete(item) {
            axios.delete('/subject/' + item.subjectNo)
                .then(res => {
                    if (res.data.success) {
                        alert('删除成功')
                        this.loadsubjects()
                    }
                })
        },
    },
    created() {
        this.loadsubjects()
        this.loadgrades()
    }
}
</script>
<style scoped></style>